import { Button, Form, Input, notification, Select } from 'antd';
import { LikeTwoTone } from '@ant-design/icons';

const layout = {
  labelCol: {
    span: 5,
  },
  wrapperCol: {
    span: 16,
  },
};

/* eslint-disable no-template-curly-in-string */
const validateMessages = {
  required: '${label}为必填项'
};
/* eslint-enable no-template-curly-in-string */


const handleChange = (value) => {
  console.log(`selected ${value}`);
};

const FormList = () => {
  const [api, contextHolder] = notification.useNotification();
  // 提交事件触发
  // TODO: 调用后端接口保存留言数据（并自动生成随机头像） 调用返回成功后给反馈 并重新获取数据
  const onFinish = (values) => {
    console.log(values);
    api.open({
      message: '成功',
      description:
        '期待您的下次留言',
      icon: (
        <LikeTwoTone
        twoToneColor='#FF8000'
          style={{
            fontSize: '50px',
            color: '#108ee9',
          }}  
        />
      )
    })
  }

  return (
    <>
      <Form
        {...layout}
        name="nest-messages"
        onFinish={onFinish}
        style={{
          maxWidth: 600,
        }}
        validateMessages={validateMessages}
      >

        {/* 昵称 */}
        <Form.Item
          name={['data', 'nickname']}
          label="昵称"
          rules={[
            {
              required: true
            }
          ]}
        >
          <Input />
        </Form.Item>

        {/* 身份 */}
        {/* TODO: 后端传入待选数据 */}
        <Form.Item
          name={['data', 'designation']}
          label="身份"
          rules={[
            {
              required: true
            }
          ]}
        >
          <Select
            defaultValue=""
            style={{
              width: 120,
            }}
            onChange={handleChange}
            options={[
              {
                value: 'jack',
                label: 'Jack',
              },
              {
                value: 'lucy',
                label: 'Lucy',
              },
              {
                value: 'Yiminghe',
                label: 'yiminghe',
              },
              {
                value: 'disabled',
                label: 'Disabled',
                disabled: true,
              },
            ]}
          />
        </Form.Item>

        {/* 评论内容 */}
        <Form.Item
          name={['data', 'desc']}
          label="留言"
          rules={[
            {
              required: true
            }
          ]}>
          <Input.TextArea />
        </Form.Item>
        <Form.Item
          wrapperCol={{
            ...layout.wrapperCol,
            offset: 17,
          }}
        >
          {contextHolder}
          <Button type="primary" htmlType="submit">
            提交留言😶
          </Button>
        </Form.Item>
      </Form>
    </>
  )
}

export default FormList;